<template>
  <div class="image-container">
    <el-radio-group
      v-model="params.collect"
      size="small"
      @change="changeCollect"
    >
      <el-radio-button :label="false">全部</el-radio-button>
      <el-radio-button :label="true">收藏</el-radio-button>
    </el-radio-group>
    <el-button
      type="success"
      class="upload-btn"
      size="small"
      @click="dialogUploadVisible = true"
      v-if="uploadBtn"
      >上传素材</el-button
    >
    <el-row :gutter="10" class="img-box">
      <el-col
        :md="6"
        :lg="4"
        :sm="6"
        :xs="12"
        class="image-item"
        v-for="(img, index) in imageList"
        :key="img.id"
        @click.native="selected = index"
      >
        <el-image
          class="image-box"
          style="height: 100px"
          :src="img.url"
          fit="cover"
        ></el-image>
        <!-- 素材管理需要有收藏和删除素材按钮的div -->
        <div class="opera-box" v-if="uploadBtn">
          <el-button
            :icon="img.is_collected ? 'el-icon-star-on' : 'el-icon-star-off'"
            size="mini"
            circle
            @click="collectImage(img)"
            :loading="img.isLoading"
          ></el-button>
          <el-button
            icon="el-icon-delete"
            size="mini"
            circle
            @click="onDeleteImage(img)"
            :loading="img.isDelLoading"
          ></el-button>
        </div>
        <!-- 发布文章上传封面需要有当前选中的这个图片的状态 -->
        <div class="selected-box" v-if="!uploadBtn&&selected === index"></div>
      </el-col>
    </el-row>
    <el-pagination
      background
      layout="prev, pager, next"
      :total="total"
      :current-page.sync="params.page"
      :page-size="params.per_page"
      @current-change="onPageChange"
    >
    </el-pagination>
    <!-- 上传素材 -->
    <el-dialog
      title="上传素材"
      :visible.sync="dialogUploadVisible"
      :append-to-body="true"
    >
      <el-upload
        class="upload-demo"
        drag
        action="http://api-toutiao-web.itheima.net/mp/v1_0/user/images"
        multiple
        name="image"
        :headers="uploadHeaders"
        :on-success="updateSuccess"
        :on-error="updateError"
      >
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
        <div class="el-upload__tip" slot="tip">
          只能上传jpg/png文件，且不超过500kb
        </div>
      </el-upload>
    </el-dialog>
    <!-- 上传素材 -->
  </div>
</template>

<script>
import { getUserImage, collectImages, deleteImages } from "@/api/images";
export default {
  name: "ImageList",
  props: {
    uploadBtn: {
      type: Boolean,
      default: true,
    },
  },
  data() {
    const userInfo = JSON.parse(localStorage.getItem("user"));
    return {
      imageList: [], // 用户图片列表
      params: {
        page: 1,
        per_page: 10,
        collect: false, // 是否是收藏的图片
      }, // 请求参数
      total: 0, // 总数目
      dialogUploadVisible: false, // 上传素材的对话框开关
      uploadHeaders: {
        Authorization: `Bearer ${userInfo.token}`,
      },
      selected: null, // 发布文章上传封面弹框选中图片的标识
    };
  },
  methods: {
    // 获取用户素材列表
    getUserImage() {
      getUserImage(this.params).then((res) => {
        const results = res.data.data.results;
        results.forEach((img) => {
          img.isLoading = false;
          img.isDelLoading = false;
        });
        this.imageList = results;
        this.total = res.data.data.total_count;
      });
    },
    // 当前页面发生改变时
    onPageChange(page) {
      this.params.page = page;
      this.getUserImage();
    },
    // 切换收藏列表
    changeCollect() {
      this.params.page = 1;
      this.getUserImage();
    },
    // 添加素材成功后回调
    updateSuccess() {
      this.dialogUploadVisible = false;
      this.changeCollect();
    },
    // 素材上传失败
    updateError(err, file, fileList) {
      console.log(err);
      console.log(file);
      console.log(fileList);
    },
    // 收藏素材
    collectImage(img) {
      img.isLoading = true;
      collectImages(img.id, !img.is_collected).then((res) => {
        img.is_collected = !img.is_collected;
        img.isLoading = false;
      });
    },
    // 删除素材
    onDeleteImage(img) {
      img.isDelLoading = true;
      deleteImages(img.id).then((res) => {
        img.isDelLoading = false;
        this.getUserImage();
      });
    },
  },
  created() {
    this.getUserImage();
  },
};
</script>

<style lang="less" scope>
.img-box {
  margin-top: 20px;
}
.image-box {
  width: 100%;
  height: 100px;
}
.upload-btn {
  float: right;
}
.image-item {
  position: relative;
}
.opera-box {
  position: absolute;
  bottom: 5px;
  left: 5px;
  right: 5px;
  display: flex;
  justify-content: space-between;
  padding: 8px 10px;
  background-color: rgba(204, 204, 204, 0.5);
}
.selected-box {
  background: url("./selected.png") no-repeat;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  background-size: cover;
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>
